<!-- include tpl=usercp/header title=更换头像 -->
<link rel="stylesheet" type="text/css" href="js/webuploader/webuploader.css" />
<link rel="stylesheet" type="text/css" href="{$tpl.dir}usercp/static/imgareaselect.css" />
<div class="container">
	<div class="row m-3">
		<div class="col-2">
			<!-- include tpl=usercp/left -->
		</div>
		<div class="col-10">
			<div class="card">
				<div class="card-header">
					更换头像
					<!-- if $me.avatar -->
					<div class="float-end">
						<img src="{$me.avatar}" class="rounded-circle" style="width:30px;height:30px;" alt="用户当前头像" />
					</div>
					<!-- /if -->
				</div>
				<div class="card-body">
					<div style="margin:10px;">
						<div id="thelist" class="uploader-list"></div>
						<div class="_progress" id="upload_progress"></div>
						<div class="btns">
							<div id="btn_picture"></div>
						</div>
					</div>
					<div class="m-1" style="display:none;" id="show_cut">
						<div class="bg-light border"><img src="" width="500" alt="原图" id="thumbnail" /></div>
						<div class="m-3">
							<button type="button" onclick="save_thumb()" class="btn btn-primary">保存图片</button>
						</div>
					</div>
					<input type="hidden" name="thumb_id" value="" id="thumb_id" />
					<input type="hidden" name="x1" value="" id="x1" />
					<input type="hidden" name="y1" value="" id="y1" />
					<input type="hidden" name="x2" value="" id="x2" />
					<input type="hidden" name="y2" value="" id="y2" />
					<input type="hidden" name="w" value="" id="w" />
					<input type="hidden" name="h" value="" id="h" />
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="{$tpl.dir}usercp/static/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="{$tpl.dir}usercp/static/avatar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var uploader = WebUploader.create({
		auto: true,
		server: api_url('upload','ok'),
		compress: {width:800,height:800,quality:90,compressSize:200},
		pick: {'id':'#btn_picture','innerHTML':'选择本地图片'},
		fileVal: 'upfile',
		formdata:{
			'{func session_name}':'{func session_id}'
		},
		accept: {
			title: '图片',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		},
		resize: false
	});
	uploader.on('fileQueued',function(file){
		$("#upload_progress").append('<div id="phpok-upfile-' + file.id + '" class="phpok-upfile-list">' +
			'<div class="title">' + file.name + ' <span class="status">等待上传…</span></div>' +
			'<div class="progress"><span>&nbsp;</span></div>' +
			'<div class="cancel" id="phpok-upfile-cancel-'+file.id+'"></div>' + 
		'</div>' );
		$("#phpok-upfile-"+file.id+" .cancel").click(function(){
			uploader.removeFile(file,true);
			$("#phpok-upfile-"+file.id).remove();
		});
	});
	uploader.on('uploadProgress',function(file,percent){
		var $li = $('#phpok-upfile-'+file.id),
		$percent = $li.find('.progress span');
		var width = $li.find('.progress').width();
		$percent.css( 'width', parseInt(width * percent, 10) + 'px' );
		$li.find('span.status').html('正在上传…');
		self.upload_state = 'running';
	});
	uploader.on('uploadComplete',function(file){
		$("#phpok-upfile-"+file.id).fadeOut();
	});
	uploader.on('uploadSuccess',function(file,data){
		if(data.status){
			var info = data.info;
			var width = (info.attr.width && info.attr.width) > 500 ? 500 : info.attr.width;
			var height = parseInt((width * info.attr.height)/info.attr.width);
			$("#show_cut").show();
			$("#thumbnail").attr('src',info.filename).css('width',width+"px").css('height',height+"px");
			$("#thumb_id").val(info.id);
			ready_cut(width,height);
		}else{
			$.dialog.alert(data.info,function(){
				$("#show_cut").hide();
			});
		}
	});
});
</script>
<!-- include tpl=usercp/footer -->